<template>
	<view>
		<view class="container" v-if="type==1">
			<view>
				<view class="wechatapp">
					<view class="header">
						<open-data class="avatar" type="userAvatarUrl"></open-data>
					</view>
				</view>
				<view class="auth-title">申请获取以下权限</view>
				<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
				<view class="login-btn" v-if="navIndex==1">
					<button class="button btn-normal" @click.stop="getUserProfile">授权登录</button>
				</view>
				<view class="no-login-btn" v-if="navIndex==1">
					<button class="button btn-normal" @click="handleCancel">暂不登录</button>
				</view>
				<view style="font-size: 28upx;margin-top: 30upx;text-align: center;" @click="toUserXy">登录即代表您已同意<text style="color: #409EFF;">《用户服务协议》</text></view>
				<view class="login-btn" v-if="navIndex==2">
					<button class="button btn-normal" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">授权手机号</button>
				</view>
			</view>
			
		</view>
		<view class="Login" v-if="type==2">
			<view class="LoginBox">
				<view class="FormBox">
					<view class="Logintitle">欢迎登录若免</view>
					<view class="inputBox">
						<input class="input" type="number" placeholder="请输入手机号" v-model="mobile"/>
						<view @click="emptyBtn">
							<u-icon name="close-circle" size="30" color="#707070"></u-icon>
						</view>
					</view>
					<view class="inputBox">
						<input class="input" type="text" placeholder="请输入验证码" v-model="password"/>
						<view style="width: 180upx;text-align: end;color:#409EFF" @click="getCode">{{codeText}}</view>
						<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
					</view>
					<!-- <view class="modeBox">
						<view></view>
						<view class="otherLogin">
							<view class="otherItem" @click="toLogin">密码登录</view>
							<view class="otherItem" @click="toForgetPassword">忘记密码？</view>
							<view class="otherItem" @click="toRegister">立即注册</view>
						</view>
					</view> -->
					<view class="loginBtn" @click="toLoginByPhone">登录</view>
					<view style="font-size: 28upx;margin-top: 30upx;text-align: center;" @click="toUserXy">登录即代表您已同意<text style="color: #409EFF;">《用户服务协议》</text></view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
	
	
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				code: '',
				navIndex: 1,
				userMsg: {},
				type:1,
				mobile:"",
				password:"",
				codeText:'',
				userInfo:{},
				userNum:""
			}
		},
		methods: {
			toUserXy(){
				uni.navigateTo({
					url:"/pages/pageone/pages/About-us/About-us?index=2"
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					let obj = {};
					obj.mobile = this.mobile;
					obj.type = 4;
					if(!this.mobile){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入手机号",
							duration:2000
						})
						return false;
					}
					
					if(!app.$vm.globalData.phoneReg.test(this.mobile)){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入正确的手机号",
							duration:2000
						})
						return false;
					}
					this.$u.api.sendMessage(obj).then(res=>{
						
						uni.hideLoading();
						this.$refs.uToast.show({
							type:"success",
							title:"发送成功",
							duration:2000
						})
						this.$refs.uCode.start();
					})
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			emptyBtn(){
				this.mobile = ''
			},
			toLoginByPhone(){
				let obj = {};
				obj.headimgurl = this.userInfo.avatarUrl;
				obj.username = this.userInfo.nickName;
				obj.mobile = this.mobile;
				obj.code = this.password;
				obj.userNum = this.userNum;
				obj.type = 1;
				// #ifdef APP
				obj.cid = app.$vm.globalData.pushObj.clientid;
				// #endif
				let newObj = {};
				newObj.userNum = this.userNum;
				newObj.data = obj;
				this.$u.api.loginBindingMobile(obj).then(res=>{
					this.$refs.uToast.show({
						title:"登录成功",
						type:"success",
						duration:2000
					})
					this.$u.http.setConfig({
						header: {
							'token': res.token
						}
					})
					uni.setStorageSync("rmToken",res.token);
					uni.setStorageSync("userId",res.user_id);
					app.$vm.getLocation();
					app.$vm.liaotianLogin();
					let obj = {};
					obj.username = res.username;
					obj.token = res.token;
					obj.user_id = uni.getStorageSync("userId");
					obj.image_url = res.image_url;
					uni.setStorageSync("rmUser",obj);
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				})
			},
			handleCancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取微信用户信息(新版)
			getUserProfile() {
				let _this = this;
				wx.canIUse('getUserProfile') && wx.getUserProfile({
					lang: 'zh_CN',
					desc: '获取用户相关信息',
					success({
						userInfo
					}) {
						
						_this.userInfo = userInfo;
						wx.login({
							timeout: 5000,
							success: res => {
								// app.api.getSessionKey({
								// 	code: res.code
								// }).then(rem => {
								// 	console.log(rem)
								// 	_this.setData({
								// 		userMsg: userInfo,
								// 		navIndex: 2,
								// 		sessionKey: rem.data.data
								// 	})
								// })
								let codeObj = {};
								codeObj.code = res.code;
								// #ifdef APP
								codeObj.cid = app.$vm.globalData.pushObj.clientid;
								// #endif
								_this.$u.api.wxLogin(codeObj).then(rel=>{
									_this.$refs.uToast.show({
										title:"登录成功",
										type:"success",
										duration:2000
									})
									_this.$u.http.setConfig({
										header: {
											'token': rel.token
										}
									})
									uni.setStorageSync("rmToken",rel.token);
									uni.setStorageSync("userId",rel.user_id);
									app.$vm.getLocation();
									app.$vm.liaotianLogin();
									let obj = {};
									obj.username = rel.username;
									obj.token = rel.token;
									obj.user_id = rel.user_id;
									obj.image_url = rel.image_url;
									uni.setStorageSync("rmUser",obj);
									setTimeout(()=>{
										uni.navigateBack({
											delta:1
										})
									},1500)
								})
								.catch(err=>{
									if(err.message=="请绑定手机账号"){
										_this.type = 2;
										_this.userNum = err.userNum;
									}
								})
							},
							fail: err => {
								console.log(err)
							}
						})

					},
					fail() {
						//console.log('用户拒绝了授权')
					}
				})
			},
			decryptPhoneNumber(e) {
				// 提交到后端
				let _this = this;
				wx.login({
					timeout: 5000,
					success: res => {
						app.api.wxUserLogin({
								code: res.code,
								userName: _this.data.userMsg.nickName,
								headImg: _this.data.userMsg.avatarUrl,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								session_key: _this.data.sessionKey
							})
							.then(rep => {
								console.log(rep)
								wx.setStorageSync('userMsg', rep.data.data);
								app.api.header.Authorization = "Bearer " + rep.data.data.token;
								wx.navigateBack({
									delta: 1,
								})
								// _this.onShow()
							})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.status_bar{
		height: var(--status-bar-height);
		width: 100%;
	}
	.Login{
		// padding-top: 88upx;
		.LoginBox{
			padding: 64upx 112upx;
			.FormBox{
				display: flex;
				flex-direction: column;
				// justify-content: center;
				.Logintitle{
					font-size: 48upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					text-align: center;
					margin-bottom: 80upx;
				}
				.inputBox{
					width: 100%;
					display: flex;
					align-items: center;
					padding: 32upx 0;
					border-bottom: 2upx solid #EFEFEF;
					.input{
						flex: 1;
						font-size: 28upx;
						border: 0;
						outline: 0;
						color: #555555;
					}
				}
				.modeBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24upx 0;
					.otherLogin{
						display: flex;
						align-items: center;
						.otherItem{
							font-size: 20upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
							margin-left: 32upx;
						}
					}
				}
				.loginBtn{
					width: 526upx;
					height: 92upx;
					background: #FFAC3F;
					opacity: 1;
					border-radius: 46upx;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					line-height: 92upx;
					text-align: center;
					color: #FFFFFF;
					margin-top: 48upx;
				}
			}
		}
	}
	.container {
		padding: 0 60rpx;
		font-size: 32rpx;
		background: #fff;
		min-height: 100vh;
	}

	.wechatapp {
		padding: 80rpx 0 48rpx;
		border-bottom: 1rpx solid #e3e3e3;
		margin-bottom: 72rpx;
		text-align: center;

		.header {
			width: 190rpx;
			height: 190rpx;
			border: 4rpx solid #fff;
			margin: 0 auto 0;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);
		}
	}

	.auth-title {
		color: #585858;
		font-size: 34rpx;
		margin-bottom: 40rpx;
	}

	.auth-subtitle {
		color: #888;
		margin-bottom: 88rpx;
		font-size: 28rpx;
	}

	.login-btn {
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			line-height: 88rpx;
			background: #04be01;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			text-align: center;
		}
	}


	.no-login-btn {
		margin-top: 20rpx;
		padding: 0 20rpx;

		.button {
			height: 88rpx;
			line-height: 88rpx;
			background: #dfdfdf;
			color: #fff;
			font-size: 30rpx;
			border-radius: 999rpx;
			text-align: center;
		}
	}
</style>
